<template>
  <view :style="[styles]" style="overflow: hidden">
    <view class="empty-area" v-if="!attribute.list.length">
      <text class="desc">请添加轮播图</text>
    </view>

    <block v-else>
      <u-swiper
        v-if="attribute.indicatorMode === 'number'"
        circular
        :indicator="attribute.indicator"
        :indicatorStyle="attribute.indicatorStyle"
        :interval="attribute.interval"
        @click="swiperClickHandler"
        :list="attribute.list.map((item) => item['img'])"
        :previousMargin="attribute.previousMargin"
        :nextMargin="attribute.nextMargin"
        :radius="styles.borderRadius"
        :height="styles.height || 130"
        @change="(e) => (currentNum = e.current)"
      >
        <view slot="indicator" class="indicator-num">
          <text class="indicator-num__text"
            >{{ currentNum + 1 }}/{{ attribute.list.length }}</text
          >
        </view>
      </u-swiper>

      <u-swiper
        v-else
        circular
        :indicator="attribute.indicator"
        :indicatorMode="attribute.indicatorMode"
        :indicatorStyle="attribute.indicatorStyle"
        :interval="attribute.interval"
        @click="swiperClickHandler"
        :list="attribute.list.map((item) => item['img'])"
        :previousMargin="attribute.previousMargin"
        :nextMargin="attribute.nextMargin"
        :radius="styles.borderRadius"
        :height="styles.height || 130"
        @change="(e) => (currentNum = e.current)"
      ></u-swiper>
    </block>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo";

export default {
  name: `${COMPREIFX}swiper`,
  props: {
    attribute: Object,
    styles: Object,
  },
  data() {
    return {
      currentNum: 0,
    };
  },
  methods: {
    swiperClickHandler(e) {
      const item = this.attribute.list[e];
      if (item.navigateType) {
        callNavigateHook({
          type: item.navigateType,
          target: item,
        });
      }
      this.$emit("event", {
        eventName: "swiperClick",
        attribute: item,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.empty-area {
  width: 100%;
  height: 240rpx;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #333;
  .desc {
    letter-spacing: 0.3em;
  }
}
.indicator-num {
  padding: 5rpx 10rpx;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100rpx;
  width: 70rpx;
  display: flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 25rpx;
  }
}
</style>
